<script setup lang="ts">
import ShowCase from "./components/ifShowCase.vue"
import EventCaes from "./components/03_事件传递参数.vue"
import BindCase from './components/04_Vue3的属性绑定.vue'
import ForCase from './components/05_Vue3中循环列表.vue'
import ModelCase from './components/06_Vue3中的双向绑定.vue'
import ComputedCase from "./components/07_Vue3中的计算属性.vue"
import WatchCase from './components/08_Vu3Watch侦听器的用法.vue'
import LifeCase from './components/09_生命周期的钩子函数.vue'
import ListV2Case from './components/10_Vue2的生命周期.vue'
import RefCase from './components/11_通过ref获取dom元素.vue'
import ROUCase from './components/12_综合案例.vue'
import HmHeader from "./components/HmHeader.vue"
import HmBody from "./components/HmBody.vue"
import HmFooter from "./components/HmFooter.vue"
import Parent from "./components/13_父子通信中的父组件.vue"
import GrandFather from './components/15_跨代传值的爷爷组件.vue'
import SlotCase from './components/18_Vue3中的默认插槽技术.vue'
import HmTable from './components/19_Vue3中封装table组件.vue'
import TestTable from './components/20_作用域插槽的简单版本.vue'
import { ref } from "vue"

type PersonItem = { id: number, username: string, age: number }
type PersonColumnArr = Array<{ label: string, field: keyof PersonItem }>

const columns: PersonColumnArr = [
  { label: '序号', field: "id" },
  { label: '姓名', field: "username" },
  { label: '年纪', field: "age" },
  { label: '操作', field: "" as keyof PersonItem },
]

const data = ref<PersonItem[]>([
  {
    id: 1,
    username: '张小华',
    age: 18
  },
  {
    id: 2,
    username: '高大明',
    age: 18
  }, {
    id: 3,
    username: '刘德住',
    age: 20
  }
])

const delRow = (row: PersonItem) => {
  data.value = data.value.filter(item => item.id !== row.id)
}
</script>

<template>
  <!-- <ShowCase></ShowCase> -->
    <!-- <show-case></show-case> -->
    <!--<ShowCase></ShowCase>-->
    <!--<EventCaes></EventCaes>-->
    <!-- <BindCase></BindCase> -->
    <!-- <ForCase></ForCase> -->
    <!-- <ModelCase></ModelCase> -->
    <!-- <ComputedCase></ComputedCase> -->
    <!-- <WatchCase></WatchCase> -->
    <!-- <LifeCase v-if="showCom"></LifeCase>
    <ListV2Case></ListV2Case>
    <button @click="showCom = !showCom">创建/销毁</button> -->
    <!-- <RefCase></RefCase> -->
    <!-- <ROUCase></ROUCase> -->
    <!-- <div class="con">
        <HmHeader>
        </HmHeader>
        <HmBody>
        </HmBody>
        <HmFooter>
        </HmFooter>
    </div> -->
    <!-- <Parent></Parent> -->
     <!-- <GrandFather></GrandFather> -->
      <!-- <SlotCase>
        <template #header>
            <h1>我是插槽1</h1>
        </template>
        <template #body>
            <h1>我是插槽2</h1>
        </template>
        <template #footer>
            <h1>我是插槽3</h1>
        </template>
        <template #default>
            <h1>我是插槽4</h1>
        </template>
      </SlotCase> -->
  <!-- <HmTable :columns="columns" :data="data">
    <template #row="obj">
      <button>编辑</button>
      <button @click="delRow(obj.row)">删除</button>
    </template>
  </HmTable>
  <TestTable>
    <template #row="{ p }">
      <h2>姓名：{{ p.name }}, 年龄： {{ p.age }}</h2>
    </template>
  </TestTable> -->
  <div class="container">
    <!-- 一级路由容器 -->
    <div class="nav">
      <router-link to="/home">去主页</router-link>
      <router-link to="/login">去登录</router-link>
    </div>
    <router-view></router-view>
  </div>
</template>

<style scoped>
.container {
  width: 50%;
  height: 50vh;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background-color: pink;
}

.nav a {
  margin-left: 10px;
  text-decoration: none;
}

.router-link-active {
  font-size: 30px;
}
</style>
